<template>
  <a-card :bordered="false" class="channel-analys">
    <div class="d-aic">
      <div class="flex-grow channel-border">
        <b-data-title title="总参与用户"/>
        <total-pie-special-label ref="totalPieSpecialLabel"/>
      </div>
      <div class="flex-grow channel-two-border">
        <b-data-title title="裂变率（%）"/>
        <fission-columnar ref="FissionColumnar"/>
      </div>
    </div>
    <div class="d-aic">
      <div class="flex-grow channel-three-border">
        <b-data-title title="分享率（%）"/>
        <share-columnar ref="ShareColumnar"/>
      </div>
      <div class="channel-border flex-grow">
        <b-data-title title="留存率（%）"/>
        <keep-columnar ref="KeepColumnar"/>
      </div>
    </div>
  </a-card>
</template>

<script>

  import TotalPieSpecialLabel from './TotalPieSpecialLabel'
  import FissionColumnar from './FissionColumnar'
  import ShareColumnar from './ShareColumnar'
  import KeepColumnar from './KeepColumnar'
  import API from '../../../../../api/gameData'

  export default {
    name: 'ChannelAnalyse',
    components: { KeepColumnar, ShareColumnar, FissionColumnar, TotalPieSpecialLabel },
    data () {
      return {}
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      },
      gameTaskId () {
        return this.$route.query.gameTaskId
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        API.gameChannelData({ gameTaskId: this.gameTaskId, qwUserId: this.qwUserId }).then(res => {
          this.$refs.totalPieSpecialLabel.init(res)
          this.$refs.KeepColumnar.init(res)
          this.$refs.FissionColumnar.init(res)
          this.$refs.ShareColumnar.init(res)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .channel-analyse {
    .flex-grow {
      flex-grow: 1;
    }

    .channel-border {
      border: 1px solid #ff5f5f;
    }

    .channel-two-border {
      border: 1px solid #D9D9D9;
      border-bottom: none;
      border-left: none;
    }

    .channel-three-border {
      border: 1px solid #D9D9D9;
      border-top: none;
      border-right: none;
    }
  }

</style>
